<template>
  <section :style="{'--chosedColor':chosedColor}">
    <div class="icon-list">
      <div class="icon-line"
           v-for="(listChild,index) of handleSizeList"
           :key="index">
        <!-- 上传图片 -->
        <div v-if="index == 0 && hidden"
             class="upload-item">
          <a-upload accept="image/*"
                    :action="storage.uploadURL"
                    :data="handleUploadData"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :show-upload-list="false"
                    @change="uploadIcon">
            <div>
              <a-icon type="plus" />
            </div>
          </a-upload>
        </div>
        <!-- 本地图标 -->
        <div v-for="(icon,index2) of listChild"
             :key="index2">
          <div class="column"
               v-if="icon !=''"
               @click="choseIcon(icon)">
            <div class="item-box"
                 :class="{'chosedIcon':icon == iconData.icon}">
              <!-- <a-icon :type="icon" /> -->
              <span class="iconfont"
                    :class="icon">
              </span>
            </div>
          </div>
        </div>

      </div>
    </div>
    <!-- 选择颜色 -->
    <a-row class="colorRow">
      <a-col v-for="(color,index2) of iconColor"
             :key="index2">
        <div class="colorSpan"
             :style="{'background-color':color}"
             @click="chosedColor = color"></div>
      </a-col>
    </a-row>
  </section>
</template>

<script>
// 后台调用
import { storage } from '@zh/common-utils/http'
import PropTypes from '@zh/common-utils/prop-types'
const cloneDeep = require('clone')
export default {
  name: 'ZAppIconList',
  extends: null,
  mixins: [],
  components: {},
  props: {
    value: PropTypes.object.def({}),
    // 是否允许上传图片
    hideUploadIcon: PropTypes.bool.def(false),
    // 每行显示图标数
    size: PropTypes.number.def(5),
    // 颜色集合
    iconColor: PropTypes.array.def(['#0089ff', '#00b853', '#ffa200', '#ff7357', '#5c72ff', '#85c700', '#ffc505', '#ff6b7a', '#8f66ff', '#14a9ff']),
    // 图标类型：app应用图标 form表单图标
    iconType: PropTypes.string.def(''),
    parentId: PropTypes.string.def(''),
    headers: PropTypes.object.def({}),
    bucketName: PropTypes.string.def('moli_app_bucket'),
    systemName: PropTypes.string.def('moli_app_setting'),
    configGroup: PropTypes.string.def('moli_app_config')
  },
  data () {
    return {
      storage,
      // 是否隐藏上传图标
      hidden: true,
      iconData: {},
      // 图标列表
      // 应用图标
      iconAppList: [
        'icon-form-shenfen',
        'icon-form-gongwen',
        'icon-form-fenlei',
        'icon-form-wodezhiban',
        'icon-form-gongwenguanli',
        'icon-form-wenjianjia',
        'icon-form-mubiao',
        'icon-form-wj-wjj',
        'icon-form-mubiaoguanli',
        'icon-form-renwu',
        'icon-form-jihua',
        'icon-form-fenlei1',
        'icon-form-jihua1',
        'icon-form-wenjianguanliqi',
        'icon-form-huiyishiyuding_huaban',
        'icon-form-renyuanguanli',
        'icon-form-fenlei2',
        'icon-form-wenjianguanli',
        'icon-form-jihuabiao',

        'icon-form-xitongrizhi',
        'icon-form-shujutongji',
        'icon-form-shujushangchuan',
        'icon-form-guanliyuan',
        'icon-form-hehuorencheliang',
        'icon-form-duban',
        'icon-form-bingdu',
        'icon-form-biaoge',
        'icon-form-chazhao',
        'icon-form-anquan'
      ],
      // 表单图标
      iconFormList: [
        'icon-form-anquan',
        'icon-form-fasongwenjianfawen1300',
        'icon-form-biaodan',
        'icon-form-zidingyibiaodan',
        'icon-form-wenjianjia',
        'icon-form-shouwen',
        'icon-form-wj-rysq',
        'icon-form-wj-ryxx',
        'icon-form-24gl-folderOpen',
        'icon-form-renyuan-',
        'icon-form-jurassic_form-blank',
        'icon-form-jine',
        'icon-form-renyuanguanli',
        'icon-form-tianjiarenyuan',
        'icon-form-biaozhang',
        'icon-form-tiaoxiuguanli',
        'icon-form-qingjia',
        'icon-form-a-rilibiaodan',
        'icon-form-biaodan1',
        'icon-form-qingjia1'
      ],
      iconList: this.iconType == 'app' ? this.iconAppList : this.iconType == 'form' ? this.iconFormList : [],
      // 选中颜色
      chosedColor: this.iconColor[0],
      fileList: []
    }
  },
  computed: {
    // 根据size 隔离成几组
    handleSizeList () {
      const list = []
      let listChild = []
      let arr = this.iconType == 'app' ? this.iconAppList : this.iconType == 'form' ? this.iconFormList : []
      for (let i = 0; i < arr.length; i++) {
        // 将数据添加在子集内
        listChild.push(arr[i])
        // 如果是该分组的时候了
        if ((i + 1) % this.size == 0) {
          // 将这一组的存进去
          list.push(Object.assign([], listChild))
          // 清空子集
          listChild = []
        }
        // 如果不能整除并且在最后一个了
        if (arr.length % this.size != 0 && i == arr.length - 1) {
          // 将这最后一组的存进去
          list.push(Object.assign([], listChild))
        }
      }
      return list
    }
  },
  watch: {
    chosedColor () {
      this.propValue()
    },
    hideUploadIcon: {
      deep: true,
      immediate: true,
      handler (v) {
        this.hidden = v
        if (v) {
          if (this.iconType == 'app') {
            this.iconAppList.unshift('')
          } else if (this.iconType == 'form') {
            this.iconFormList.unshift('')
          }
        }
      }
    },
    value: {
      deep: true,
      immediate: true,
      handler (value) {
        this.iconData = cloneDeep(value)
        if (this.iconData.iconColor != '') {
          this.chosedColor = this.iconData.iconColor
        }
      }
    }
  },
  methods: {
    // 更改选择图标事件
    choseIcon (icon) {
      this.iconData.iconType = '0'
      this.iconData.icon = icon
      this.propValue()
    },
    // 上传应用图标
    uploadIcon (info) {
      this.iconData.iconType = '1'
      let file = info.file
      const item = {
        // parentId: this.parentId,
        uid: file.uid,
        name: file.name,
        status: file.status,
        configGroup: this.configGroup,
        url: file.url
      }
      if (file.response) {
        if (file.response.code == 0) {
          item.url = `${storage.downloadURL}/${file.response.data.key}`
          item.uid = file.response.data.key
          item.status = 'done'
        } else {
          this.$notify.error(file.response.msg)
          item.status = 'error'
        }
      }
      if (file.status == 'done') {
        this.iconData.icon = item.uid
        this.propValue()
      }
    },
    handleUploadData (file) {
      return {
        uid: file.uid,
        name: file.name,
        status: 'done',
        chunked: false,
        bucketName: this.bucketName,
        systemName: this.systemName
      }
    },
    /** 上传数据 */
    propValue () {
      this.iconData = {
        icon: this.iconData.icon,
        iconColor: this.chosedColor,
        iconType: this.iconData.iconType
      }
      this.$emit('model', this.iconData)
    }
  },
  /** 设置值只传一层 */
  model: {
    event: 'model'
  }
}
</script>

<style lang="less" scoped>
::v-deep .ant-upload.ant-upload-select-picture-card {
  width: 40px;
  height: 40px;
  margin-right: 0;
  margin-bottom: 0;
}
.upload-item {
  width: 50px;
  height: 50px;
  padding-left: 5px;
  overflow: hidden;
}
.icon-list .icon-line {
  display: flex;
}
.icon-list .column {
  width: 50px;
  height: 50px;
  line-height: 50px;
}
.icon-list .column > div {
  text-align: center;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-color: #dcdfe6;
  margin: auto;
  border-radius: 10%;
}
.icon-list .column > div i {
  font-size: var(--font-size-20);
}
.icon-list .column :hover {
  color: #f5f7fa !important;
  background-color: var(--chosedColor) !important;
  cursor: pointer;
}
.icon-list {
  .item-box {
    &:hover {
      .iconfont {
        color: #f5f7fa !important;
      }
    }
  }
}
.chosedIcon {
  color: #f5f7fa !important;
  background-color: var(--chosedColor) !important;
  .iconfont {
    color: #f5f7fa !important;
  }
}
.colorRow {
  padding-top: 5px;
  padding-left: 5px;
  padding-bottom: 5px;
  display: flex;
  flex-wrap: wrap;
}
.colorRow .ant-col {
  width: 25px;
  height: 25px;
}
.colorRow .ant-col .colorSpan {
  width: 20px;
  height: 20px;
  border-radius: 10%;
}
.colorRow .ant-col :hover {
  cursor: pointer;
}
</style>
